HTML 表格和表單是網頁中常用的元素。表格用於顯示結構化數據,而表單則用於收集用戶輸入的數據。
一、製作表格
HTML 表格使用 <table>
標籤來創建。表格通常包含以下幾個重要的子標籤:
<tr>
:表示表格中的行。<th>
:表示表格中的表頭單元格,通常用來顯示列的標題。<td>
:表示表格中的數據單元格。
表格範例:
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>25</td>
<td>台北</td>
</tr>
<tr>
<td>小華</td>
<td>30</td>
<td>高雄</td>
</tr>
</tbody>
</table>
在這個範例中,使用 <table>
創建了一個表格,表格包含三列:姓名、年齡和城市。<thead>
用於定義表頭,<tbody>
用於定義表格的主體部分。
二、製作表單
HTML 表單使用 <form>
標籤來創建。表單通常包含各種輸入元素,例如文本框、單選按鈕、複選框等,這些元素可以讓用戶輸入數據。
表單範例:
<form action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br>
<label for="age">年齡:</label>
<input type="number" id="age" name="age" required><br>
<label for="city">城市:</label>
<select id="city" name="city">
<option value="taipei">台北</option>
<option value="kaohsiung">高雄</option>
<option value="taichung">台中</option>
</select><br>
<input type="submit" value="提交">
</form>
在這個範例中,<form>
標籤包裹了所有輸入元素。action 屬性指定了表單數據提交的 URL,method 指定了使用的 HTTP 方法(如 POST)。表單中包括姓名和年齡的文本框,以及城市的下拉選單,最後有一個提交按鈕。